schema2code 快速生成前后端页面
后台管理系统的核心工作是对数据库表格的增删改查。uni-cloud 提供的 schema2code 功能，可以基于 OpenDB Schema 自动生成 uni-admin 的管理页面，将原本需要数小时的工作压缩到几分钟内完成。本节完整演示从 Schema 到可用的增删改查页面的全过程。
schema2code 工作原理
schema2code 的核心流程是：Schema 定义 → 自动分析字段 → 生成 add/edit/list 三个页面。它读取数据库 Schema 中每个字段的类型、标题、枚举、外键关联等元信息，生成对应的管理页面代码。
OpenDB Schema (.schema.json)
├── 字段定义（type, title, description）
├── 枚举类型（enum, foreignKey）
└── 权限配置（permission）
↓ schema2code
├── list.vue （列表页 - 展示+搜索+删除）
├── add.vue （新增页 - 表单提交）
└── edit.vue （编辑页 - 表单回填+更新）
text
实战：生成 Banner 管理页面
步骤一：准备 Schema
以 openDB-banner.schema.json（滚动头图）为例，该 Schema 包含以下字段：
| 字段 | 说明 | 类型 |
|---|---|---|
| bannerfile | 图片文件 | file |
| openurl | 点击跳转地址 | string |
| title | 标题 | string |
| sort | 排序权重 | number |
| category_id | 栏目 ID | string |
| status | 生效状态 | bool |
| description | 描述/备注 | string |
步骤二：执行 schema2code
- 在 HBuilderX 中找到 database 目录下的目标 Schema 文件
- 右键 → schema2code
- 选择目标项目（如 uni-admin）
- 选择页面类型：uni-cloud-admin 页面
- 勾选需要管理的字段
- 选择渲染模式：
- view：标准 Vue 渲染（推荐，跨端兼容）
- nvu：原生渲染（仅 APP 端，性能更好但 CSS 受限）
- 点击确定，等待生成
关于 nvue 模式
nvue 是 uni-app APP 端内置的基于 Weex 改进的原生渲染引擎。虽然 nvue 也可以做多端编译输出到 H5 或小程序，但 CSS 写法受限。如果不开发 APP，则不需要使用 nvue。
步骤三：注册页面
生成完成后需要：
- 记录
pages.json中新增的页面路径（如/pages/banner/list） - 在 uni-admin 的菜单管理中添加对应菜单：
- 新增一级菜单（如"内容管理"）
- 新增子菜单（如"头图管理"），绑定页面 URL
菜单配置关键字段：
{
"menuId": "banner",
"menuName": "头图管理",
"pageUrl": "/pages/banner/list",
"icon": "uni-icons-image"
}
json
步骤四：排序功能
生成的前端页面默认可能不包含排序。需要手动在 list.vue 中的 <uni-cloud-db> 组件上添加 orderby 属性：
<uni-cloud-db
collection="openDB-banner"
orderby="sort asc"
...
/>
vue
排序语法说明：
| 语法 | 效果 |
|---|---|
sort asc | 按 sort 字段升序 |
sort desc | 按 sort 字段降序 |
sort desc, title asc | 多字段排序 |
联合查询（foreignKey）
Schema 中可以通过 foreignKey 实现表关联查询。例如文章表关联分类表：
{
"category_id": {
"bsonType": "string",
"enum": {
"collection": "uni-cms-categories",
"field": "name as text, _id as value",
"where": "",
"foreignKey": "uni-cms-categories._id"
}
}
}
json
这段配置的含义是：category_id 字段的值是一个下拉选项，选项数据来自 uni-cms-categories 表，显示名称（text）取 name 字段，实际值（value）取 _id 字段。
schema2code 合并策略
当多次执行 schema2code 时，系统会弹出 diff 对比页面。这是因为之前可能已经手动修改过生成的代码。合并策略：
- 合并：保留原有修改，同时接受新生成的代码
- 跳过：保留原有代码不变
- 覆盖：使用新生成的代码完全替换
这个机制确保了修改 Schema 后重新生成时不会丢失之前的手动调整。
自定义编辑组件
schema2code 默认根据字段类型生成对应组件，但可以通过 componentForEdit 指定自定义组件。例如将 content 字段的编辑器从默认组件替换为 textarea：
{
"content": {
"bsonType": "object",
"componentForEdit": {
"name": "textarea"
}
}
}
json
如果需要富文本编辑器，可以在 uni_modules 中安装对应的编辑器组件，然后在 componentForEdit.name 中指定组件名称。
最佳实践
- 先设计 Schema，再生成代码：完善的 Schema 定义（包括 title、description）会让生成的页面更友好
- 善用合并策略：多次生成时注意保留手动修改
- 验证前后端联动：在 admin 新增数据后，立即在前端验证数据是否正确展示
- 排序字段不可省略：轮播图等需要排序的场景务必添加 sort 字段和 orderby
↑